<template>
    <transition name="showHeader">
        <div v-if="visible" class="header-animat">
            <a-layout-header
                v-if="visible"
                :class="[
                    fixedHeader && 'ant-header-fixedHeader',
                    sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed',
                ]"
                :style="{ padding: '0', height: '55px' }"
            >
                <div v-if="mode === 'sidemenu'" class="header">
                    <a-menu style="height: 55px" mode="horizontal" :default-selected-keys="this.defApp">
                        <a-icon
                            v-if="device === 'mobile'"
                            class="trigger"
                            :type="collapsed ? 'menu-fold' : 'menu-unfold'"
                            @click="toggle"
                        />
                        <a-icon
                            v-else
                            class="trigger"
                            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
                            @click="toggle"
                        />
                        <user-menu></user-menu>
                    </a-menu>
                </div>
                <div v-else :class="['top-nav-header-index', theme]">
                    <div class="header-index-wide">
                        <div class="header-index-left">
                            <logo class="top-nav-header" :show-title="device !== 'mobile'" />
                            <s-menu v-if="device !== 'mobile'" mode="horizontal" :menu="menus" :theme="theme" />
                            <a-icon
                                v-else
                                class="trigger"
                                :type="collapsed ? 'menu-fold' : 'menu-unfold'"
                                @click="toggle"
                            />
                        </div>
                        <user-menu class="header-index-right"></user-menu>
                    </div>
                </div>
            </a-layout-header>
        </div>
    </transition>
</template>

<script>
import UserMenu from '../tools/UserMenu'
import SMenu from '../Menu/'
import Logo from '../tools/Logo'
import { mixin } from '@/utils/mixin'
import { mapGetters } from 'vuex'

export default {
    name: 'GlobalHeader',
    components: {
        UserMenu,
        SMenu,
        Logo,
    },
    computed: {
        ...mapGetters(['userInfo']),
    },
    mixins: [mixin],
    props: {
        mode: {
            type: String,
            // sidemenu, topmenu
            default: 'sidemenu',
        },
        menus: {
            type: Array,
            required: true,
        },
        theme: {
            type: String,
            required: false,
            default: 'dark',
        },
        collapsed: {
            type: Boolean,
            required: false,
            default: false,
        },
        device: {
            type: String,
            required: false,
            default: 'desktop',
        },
    },
    data() {
        return {
            visible: true,
            oldScrollTop: 0,
            defApp: [],
        }
    },
    mounted() {
        document.addEventListener('scroll', this.handleScroll, { passive: true })
    },
    methods: {
        toggle() {
            this.$emit('toggle')
        },
    },
    beforeDestroy() {
        document.body.removeEventListener('scroll', this.handleScroll, true)
    },
}
</script>

<style lang="less">
@import '../index.less';

.header-animat {
    position: relative;
    z-index: @ant-global-header-zindex;
}
.showHeader-enter-active {
    transition: all 0.25s ease;
}
.showHeader-leave-active {
    transition: all 0.5s ease;
}
.showHeader-enter,
.showHeader-leave-to {
    opacity: 0;
}
</style>
